! function() {
    function init() {
        new Vue({
            el: 'body',
            data: {
                text: '这里是文字',
                handle: new TextToPng()
            },
            computed: {
                imgs: function() {
                    if (this.text.trim() === '') {
                        return [];
                    }
                    var text = this.text.trim().split('');
                    for (var i = text.length - 1; i >= 0; i--) {
                        text[i] = this.handle.get(text[i]);
                    }
                    return text;
                }
            }
        });
    }

    function TextToPng() {
        var doc = window.document;
        var body = doc.body;
        this.div = doc.createElement('div');
        this.div.style.opacity = 0;
        this.div.style.float = 'left';
        this.div.style.pointerEvents = 'none';
        body.appendChild(this.div);

        this.canvas = doc.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
    }
    TextToPng.prototype.get = function(chat) {
        this.div.innerText = chat;
        var width = this.div.clientWidth;
        var height = this.div.clientHeight;
        var pos = this.ctx.measureText(chat);
        this.canvas.width = width;
        this.canvas.height = height;

        this.ctx.fillStyle = "#f09";
        this.ctx.textAlign = 'left';
        this.ctx.textBaseline = 'top';
        this.ctx.font = document.body.parentNode.style.fontSize + ' myfont';
        this.ctx.clearRect(0, 0, width, height);
        this.ctx.fillText(chat, 0, 0);
        return this.canvas.toDataURL("image/png");;
    };
    window.onload = init;

    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
}();